<template>
    <div class="edayunSkuDefend-wrap">
        <el-button
            type="danger"
            icon="el-icon-bell"
            @click="edayunSkuDefend()"
            size="small"
        >{{$t('m.label.edayunSKUMaintain')}}{{tableData.length}}</el-button>
        <el-dialog
            :title="$t('m.label.edayunSKUMaintain')"
            :visible.sync="dialogTableVisible"
            width="750px"
        >
            <el-table :data="tableData" :header-cell-style="getRowClass" max-height="400" border>
                <el-table-column property="edaYunSku" :label="$t('m.label.edayunSKU')" width="140"></el-table-column>
                <el-table-column property="countryCode" :label="$t('m.label.country')"></el-table-column>
                <el-table-column
                    property="productId"
                    :label="$t('m.label.productModelNumber')"
                    width="160"
                >
                    <template slot-scope="scope">
                        <el-select
                            v-model="productId"
                            :placeholder="$t('m.placeholder.selectProductModelNumber')"
                            filterable
                            size="mini"
                            v-if="scope.row.edit"
                            clearable
                            @change="getProduct(scope.row)"
                        >
                            <el-option
                                v-for="item in product"
                                :key="item.productId"
                                :label="item.productModelNumber"
                                :value="item.productId"
                            ></el-option>
                        </el-select>
                        <span v-text="scope.row.productModelNumber" v-if="!scope.row.edit"></span>
                    </template>
                </el-table-column>
                <el-table-column property="asin" :label="$t('m.label.ASIN')" width="160">
                    <template slot-scope="scope">
                        <el-select
                            v-model="asinId"
                            :placeholder="$t('m.placeholder.selectASIN')"
                            filterable
                            size="mini"
                            clearable
                            v-if="scope.row.edit"
                            @change="geAsinId(scope.row)"
                        >
                            <el-option
                                v-for="item in Asin"
                                :key="item.asinId"
                                :label="item.asin"
                                :value="item.asinId"
                            ></el-option>
                        </el-select>
                        {{!scope.row.edit?scope.row.asin:''}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" :label="$t('m.label.operating')" width="150">
                    <template slot-scope="scope">
                        <el-button
                            @click="clickPreserve(scope.row)"
                            size="mini"
                            :disabled="scope.row.edit?false:true"
                            type="primary"
                        >{{$t('m.button.save')}}</el-button>
                        <el-button
                            @click="clickEdit(scope.row)"
                            size="mini"
                            :type="scope.row.edit?'info':''"
                        >{{$t('m.button.edit')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="clickUpAllDate">{{$t('m.button.save')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const ERR_OK = 200;
import product from "components/searchfor/product.vue";
import ASIN from "components/searchfor/ASIN.vue";
export default {
    data() {
        return {
            tableData: [],
            dialogTableVisible: false,
            allDatelength: 0,
            product: [],
            productId: "",
            Asin: [],
            asinId: ""
        };
    },
    created() {
        this.getedaYunAsinSku();
    },
    methods: {
        edayunSkuDefend() {
            this.dialogTableVisible = true;
            this.getModelNumber();
        },
        // 获取modelNumber
        getModelNumber() {
            this.$ajax({
                method: "post",
                url: this.GLOBAL.commonService + "/query/modelNumberQuery",
                data: {}
            }).then(res => {
                this.product = res.data.data.ProductModelNumber;
            });
        },
        //获取ASIN
        getAsinQuery(data) {
            this.$ajax({
                method: "post",
                url: this.GLOBAL.commonService + "/query/asinQuery",
                data: {
                    productIds: data
                        ? this.productId
                            ? Array(this.productId.toString())
                            : []
                        : []
                }
            }).then(res => {
                this.Asin = res.data.data.Asin;
                this.asinId = this.Asin.find(item => item.asinId == this.asinId)
                    ? this.asinId
                    : "";
            });
        },
        getProduct(item) {
            this.getAsinQuery(item);
            item.productModelNumber = this.product.find(
                items => items.productId === this.productId
            ).productModelNumber;
            item.productId = this.productId
        },
        geAsinId(item) {
            item.asin = this.Asin.find(
                items => items.asinId === this.asinId
            ).asin;
        },
        getedaYunAsinSku() {
            this.$ajax
                .get(
                    this.GLOBAL.fulfillmentOrderService +
                        "/edaYunAsinSku/selectEdaYunSkuBySkuAndProduct"
                )
                .then(res => {
                    if (res.data.code) {
                        let data = res.data.data;
                        data.forEach(item => {
                            item.edit = false;
                        });
                        this.tableData = data;
                    }
                });
        },
        clickPreserve(item) {
            this.updateAsinSkuList([item]);
        },
        clickUpAllDate() {
            this.updateAsinSkuList(this.tableData, true);
        },
        updateAsinSkuList(array, bo) {
            let data = array.filter(
                item => item.productModelNumber || item.asin
            );
            if (data.length === 0) {
                this.$message.warning("请选择产品型号或ASIN");
                return;
            }
            this.$ajax({
                method: "put",
                url:
                    this.GLOBAL.fulfillmentOrderService +
                    "/edaYunAsinSku/updateAsinSkuList",
                data: data
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$message.success("保存成功");
                    if (!bo) {
                        this.tableData.splice(
                            this.tableData.findIndex(
                                item =>
                                    !data.every(
                                        items =>
                                            items.edaYunSkuId !==
                                                item.edaYunSkuId ||
                                            !items.productModelNumber ||
                                            !items.asin
                                    )
                            ),
                            1
                        );
                    } else {
                        this.getedaYunAsinSku();
                    }
                } else {
                    this.$message.success(res.data.msg);
                }
            });
        },
        clickEdit(item) {
            this.tableData.forEach(items => {
                if (item.edaYunSkuId !== items.edaYunSkuId) {
                    items.edit = false;
                }
            });
            this.getAsinQuery();
            this.productId = "";
            this.asinId = "";
            item.edit = item.edit ? false : true;
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        product,
        ASIN
    }
};
</script>
<style lang="stylus" scoped>
.edayunSkuDefend-wrap {
    display: inline-block;
}

.el-input {
    font-size: 14px;
}
</style>